5. how to build codesys visualizations 1
在本课中,我们将学习如何开发和构建它们以及如何在我们的项目中使用它们。
In this lesson, we will learn about, viz., how to develop them and build them and how to use them within our projects.
因此,对于初学者来说,让我们从标准项目创建一个新项目,并将其称为可视化测试。
So for starters, let's create a new project from a standard project and let's call this visualization test.
让我们选择标准的,然后看看如何创建可视化。
Let's select the standard one and let's see how we can create a visualization.
因此,首先,让我们在应用程序中添加可视化所需的所有必要组件。
So, first of all, let's add all the necessary components that we need for the visualizations in our application.
所以还有其他一些事情你需要做才是正确的。
So there are other things that you need to do is right.
单击应用程序,添加对象并选择可视化。
Click an application, add object and select visualization.
这里,系统会询问您是否要导入可视化符号库,该符号库对于开发可视化非常有用,因为它包含许多不同的图形和图形对象。
Here, the system will ask you if you want to import the visualisation symbol library that is quite useful to develop visualization because it contains many different graphics and the graphical objects.
因此,让我们选择这个和添加的那个。
So let's select this and that added.
有时这个过程可能需要一段时间。
Sometimes this process may might take a while.
一段时间后,您会看到这里添加了许多不同的东西,首先,您创建的可视化现在是空的。
And after a while, you will see many different things that are being added over here, first of all, you have the visualization that you created that is empty right now.
可视化管理器、视觉管理器是一个包含有关可视化和许多其他内容的不同设置的工具。
And the visualization manager, the vision manager is a tool that contains different settings concerning the visualization and many other things.
当你想使用这些可视化作为网络时,这个对象非常有用。
And this object is quite useful when you wanna use the because these visualizations as web, these visualizations.
我们将在本课后面看到这一点。
And we will see this later in the lesson.
首先,在我之前的通话中,您已经了解了在线时如何与可视化进行交互以及如何在该代码系统中使用它们。
So first of all, you in my previous calls, you have already seen how to interact with visualization when you are online and how they are used within that code system.
现在我们将看看如何开发它们。
Now we are going to see how to develop them.
因此,可视化主要有两个主要用途。
So visualizations are mainly used have two main purposes.
第一个是对正在发生的情况、程序的控制器以及您在 p.l.c. 上下载的软件有一些视觉反馈。
The first one is to have some visual feedback of what's going on, the controller of the program and software that you downloaded on your p.l.c..
第二个目的是真正能够与之交互。
And the second purpose is to actually be able to interact with it.
因此,让我们尝试创建一个非常简单的可视化,并编写一些代码,这些代码实际上可以帮助我们看到我们确实在与程序交互。
So let's try to create a very simple visualization and also write a little code that will actually help us see that we are really interacting with the program.
因此,让我们以与之前类似的方式执行此操作。
So let's do this in a similar way as well as before.
因此,我们假设我们有一个按钮,并且通过这个按钮我们可以增加计数器。
So let's presume that we have a button and with this button we are incrementing counter.
因此,像以前一样,让我们创建一个按下变量调制解调器变量的按钮。
So let's create, as before, a button pressed the variable modem variable.
让我们创建一个上升触发器来实际检测按钮何时被按下。
Let's create and, uh, rising trigger to actually detect when the button is pressed.
所以我们称之为上升触发器,类型就是我们的触发器。
So let's call this rising trigger and the type is our trigger.
哦,我们还创建一个计数器,它应该是无符号整数侧整数值。
Oh, let's also create a counter that shall be the unsigned integer side integer value.
让我们编写一个非常简单的代码。
And let's write a very simple code.
让我们按 选择上升触发器。
Let's press to select the rising trigger.
因此,Resine 触发时钟应等于按钮按下的变量,并且应放置按键,然后我们将写入该值。
So Resine trigger the clock shall be equal to the button pressed variable and the key shall be placed and then and we shall write to that.
如果我们收到上升触发锁定,那么计数器应该增加一个等于计数器加一的计数器。
If we receive the rising trigger lock you then the counter should increment a counter equal counter plus one.
好吧,让我们添加另一个功能,假设我们有一个重置按钮,那么重置按钮按下了一个关于布尔变量的按钮。
OK, let's add another functionality, let's say that we have a reset button, so reset button pressed a button that about boolean variable.
再次,我们将此重置按钮称为触发器。
Again, let's call this reset button trigger.
必还有一招。
There shall be another trick.
在这里,我们必须搜索重置按钮触发按下,好吗?
And over here, let's have to search for the reset button trigger press, OK?
在这里,我们需要按下重置按钮作为时钟输入。
And here we would need the reset button pressed as the clock input.
就在这里,如果重置按钮触发,该提示等于 true,那么我们将重置计数器。
And that's right over here that if that reset button trigger, that cue is equal to true, then we shall reset the counter.
所以说是这样的。
So that's right.
计数器等于零。
Counter is equal to zero.
好的,让我们尝试为此创建一个简单的可视化。
OK, so let's try to create a simple visualization for this.
如果我们在这里进行可视化,您将在右侧看到可视化工具框。
If we go over here into visualization, we you will see over here on the right you have the visualization tool box.
这里有不同的选项卡。
Here you have different tabs.
查看 Bill 的可视化,您可以使用不同的工具、不同的工具,可以将它们放置在可视化中。
Looking at the visualization to Bill, you have different instruments, different tools that can be used, that can be placed in your visualization.
它们在此处的不同选项卡中分开。
They are separated over here in different tabs over here.
您将拥有一些可以放置在可视化中的基本形状和一些常见控件。
You will have that some basic shape that you can place in your visualization, some common controls.
这是交互式的,或者有一些您可以交互的字段。
This are interactive or there are fields that you can interact with.
然后你还有其他东西,例如我们的管理器,一些测量控制,不同的仪表,不同的警报和开关和按钮以及其他可以在此处添加的特殊控件,日期时间控件。
Then you have other things, such as our manager, some measurement control, different meters, different alarms and switches and buttons and other special controls that you can add over here, date time controls.
您可以放置所有这些符号和不同的符号,这些符号可能对图形组件有用。
And with all of this and different symbols that you can place that may be useful for graphical components.
有了这个,你可以创建许多不同的东西,不同的可视化等等。
And with this, you can create many different things, different visualizations and so on.
因此,让我们首先尝试实现我们的简单可视化。
So let's start by trying to implement our simple visualization.
因此,让我们重点关注任何可视化中最重要的组成部分。
So let's focus on the let's say, the most important component of any visualization.
那是一个底部。
That is a bottom.
您可以在此处放置一个按钮,您将看到可以将其放大到您想要的尺寸,如果单击任何对象,您将在此处看到打开的属性选项卡,其中有许多不同的属性具体对象。
You can place a button over here, you will see that you can scale it up to the dimension that you desire, and if you click on any object, you will see here that you have a properties tab open where you have many different properties for the specific object.
例如,在这里您可以选择按钮轴的颜色。
So, for instance, over here you can select the colors of the axis of the button.
您可以选择警报颜色,并且可以选择导致按钮或对象更改颜色的条件。
You can select an alarm color that and you can choose a condition that will lead your button or your object to change the change color.
这里还有更多。
And you have many more over here.
例如,您可以在按钮内放置一些文本。
If you're for instance, you can place some text within the button.
所以我们可以在这里增加计数器。
So we could right over here increase the counter.
正如您所看到的,我们的按钮内增加了计数器文本。
And as you can see, we have an increased counter text within our button.
您可以通过单击照片中的字体来更改此处的字体。
You we can we are able to change the font here by clicking this in the photo.
您可以选择不同的尺寸。
You can choose a different dimension.
我们只需添加线条即可使其变大。
We could just add line to make it bigger.
这里有一些绝对和相对移动选项卡,可用于移动对象的位置,根据一些 Barabbas 的说法,这对于模拟来说非常强大。
And that here you have some absolute and relative movement tabs that can be used to move the position of the object, according to some Barabbas, this is quite powerful for simulation.
在上一门课程中,我在许多不同的可视化中使用了许多这些属性,例如,移动活塞的火车等等。
And I use the many of these cuma these properties in the last course in many different visualizations, for instance, the train that was moving the Pistons and so on.
为了做到这一点,我使用这个绝对相对时刻,实际上,如果您正在为您的机器开发人机界面,那么您很少会使用它,您可以放置一些文本变量,它实际上会改变此处显示的文本。
In order to do that, I use this absolute relative moment that's to actually if you're developing in a human machine interface for your machine, you it is really rare to be using that you can place some text variable that it will actually change the text that is displayed over here.
根据该变量,您有一些颜色变量可以实际在正常颜色和手臂颜色之间切换颜色。
According to the variable, you have some color variable to actually toggle the color between the normal color and the arm color.
例如,我们有一些状态变量来实际创建一个对象,无论其是否不可见。
We have some state variables, for instance, to actually make an object, invisible or not.
在这里,我们实际上最重要的是,嗯,关于我们的按钮的最重要的方面,那就是输入配置。
And over here, we have the actual most important to, um, the most important aspect concerning our buttons, and that is the input configuration.
输入配置,或者您可以声明按下按钮时发生的情况,在这里您可以切换或点击布尔变量的可能性。
The input configuration, or you can declare what is happening when you press the button and over here you have a toggle or tap possibility for boolean variables.
在这里,您可以将活体放置在切换开关或顶部。
And over here you can place a viable in either the toggle or the top.
通过在开关上放置一个变量,当您按下按钮时,该变量将在 true 和 false 之间进行处理。
By placing a variable on the toggle, the variable will be tackled between true and false when you press the button.
这意味着如果您按下按钮,变量将从 false 切换为 true 或 frontrow 切换为 false。
This means that if you press the button, the variable will switch from false to true or frontrow to false.
点击在那里,这意味着如果变量将被保持,这是真的,只要你按下按钮,当不再按下按钮时,它就会变成强制。
The tap is there, that means that if the variable will be maintained, it true, as long as you are pressing the button and it will become force when the the the the button is no longer pressed.
因此,例如,我们增加的计数器变量可能就是这种情况,因此我们可以在这里放置对变量的引用。
So, for instance, this could be the case for our increased counter variable so we can place here a reference to our variable.
所以我们需要从程序开始指向它。
So we need to point to it starting from the program.
所以我们只是玩,对吧?
So we just play, right?
是的。
Yes.
下划线 BRG,按下的按钮。
The underscore BRG, that button pressed.
这实际上是这个按钮现在正在工作,如果我们上网,我们已经将按钮的主席链接到我们程序中的和易受攻击的位置,因此如果您复制并粘贴,我们可以对重置按钮执行相同的操作。
This is actually the this button is actually working right now, if we go online, we already link the president of the button to the to the and vulnerable in our program so we can do the same thing for the reset button if you copy and paste.
我们将此称为重置计数器,我们唯一需要做的就是更改正在编辑的变量。
Let's call this reset counter, and the only thing that we need to do is to change the variable that we are editing.
所以我写了按下重置按钮。
So I write the reset button pressed.
好的,现在我们需要显示计数器变量,为此,我们只需在可视化工具框中添加即可。
OK, so right now we need to display our counter variable, so in order to do that, we can simply add in our visualization tool box.
我们可以简单地添加一个矩形。
We could simply add a rectangle.
我们可以在这里放置一个矩形。
We can place a rectangle over here.
我们可以向其中添加 urtext 变量。
And we can add the urtext variable to it.
为了在此处显示一个值,当它第一次链接我们要为我们的案例显示的变量时,这是 Piercey,在该计数器下划线,为了显示耳朵,我们需要在文本字段中编写一些特殊代码。
In order to display a value here, when it first linked the variable that we want to display for our case, this is Piercey, underscore that counter and in order to display the ear, we need to write some special code in the text field.
此代码取决于您要显示的变量的类型。
And this code that depends on the type of variable that you want to display.
如果我们要显示字符串变量,则需要写百分比。
If we want to display string variable, you need to write percent.
S。
S.
如果要显示整型变量,则需要写%;如果要显示实数,则需要写%F。
If you want to display an integer variable, you need to write percent the OR if you want to display a real number, you need to write percent F.
这实际上类似于 C 代码中使用的内容或实际打印变量值的内容。
This is actually similar to what is used in C code or to actually print the values of the variable.
所以现在我们正在显示帐户。
So right now we are displaying account.
你是一个代表这里意志的整数计数器吗?
Are you an integer counters who will represent the will here?
正如您所看到的,当我们离线时,我们实际上会看到我们在这里的百分比。
And as you can see, when we are offline, we will actually see percent we were here.
让我们增加一点字体,然后添加其他内容。
Let's increase a little bit the font and let's add something else.
假设我们想要在超过某个值时更改该矩形的颜色。
Let's say that we want to change the color of this rectangle when we get over a certain value.
为此,我们实际上可以使用正常状态和警报状态。
In order to do that, we can actually use this normal state and alarm state.
当我们选择颜色时,您会发现您可以选择我们所知的框架颜色为黑色,而彩虹的颜色为白色。
When we go in colors, you will see that you can choose the color of the frame that we know is black and the color the rainbow is white.
也许我们可以看到,我们希望这是正常状态,而警报状态是当我们可以选择的实际警报条件被触发时。
And maybe we can see that we want this is the normal state and the alarm state is when an actual alarm condition that we can choose is triggered.
所以这里我将改变实际的报警状态的实际框架和颜色。
So here I will change the actual the actual frame and color of the alarm state.
假设我们希望框架保持黑色,并且希望读取红色。
So let's say that we want the frame to remain black and we want to read red.
触发警报条件时,字段颜色为红色。
A red field color when an alarm condition is triggered.
这个报警条件是什么?
What is this alarm condition?
我们可以在颜色变量和颜色变量中指定耳朵。
We can specify ear in the color variable and the color variable.
我们想要。
We want.
假设我们希望在计数器达到 10 时实际触发颜色变化。
Let's say that we want to actually trigger the this change of color when the counter reaches 10 as a value.
所以我们可以在这里看到计数器大于或等于 10 的范围 BRG。
So we can right over here, we are seeing the scope BRG that that counter bigger or equal to 10.
实际上,您可以在这里编写一些非常复杂的条件。
You can actually write some, let's say, really complex conditions over here.
您可以不需要在此 Tagaq 颜色中放置实际变量。
You can you don't need to place a real variable in this Tagaq color.
您实际上可以在冰冷的代码中指定一个条件。
You can actually specify a condition in that icy code.
所以。
So.
到目前为止,我们就可以出发了。
Up to now, we shall be good to go.
让我们上网模拟一下。
Let's go online into simulation.
我们来进行下载。
And let's carry out to download.
正如您所看到的,我们在这里不再看到百分之零,抱歉,我们看到的是零,这是我们计数器的实际值。
And as you can see, we are no longer seeing zero percent the over here sorry, we are seeing zero, that is the actual value of our counter.
现在让我们看看按钮是否正常工作。
Let's see now if the buttons are working.
让我们点击增加计数器。
Let's click on Increase Counter.
正如您所看到的,计数器正在增加。
As you can see, the counter is increasing.
如果我点击重置重置为零。
If I click reset to reset to zero.
所有这些的逻辑都写在我们的程序中,但我们通过可视化与它交互,所以让我们得到 10。
The logic of all of this is written in our program, but we are interacting with it from visualization, so let's get the 10.
正如您所看到的,这部分逻辑正在发挥作用。
As you can see also this part of the logic is working.
因此,我们在这里使用 Kosice 构建了第一个可视化,它非常简单,但这是构建可视化所需的一些基本工具。
So here we built the first our first visualization with Kosice, and it is quite simple, but this are some of the basic tools that you need to build a visualization.
我的意思是,通过按钮和字符串显示,您几乎可以完成您需要的一切。
And I mean, with buttons and strings display, you can almost do everything you need.
在下一个视频中,我们将看到一些其他工具,我将向您展示我们的 Web 可视化内容以及当您拥有一些真实设备时它们如何有用。
The next video, we will see some other tools and I will show you what our Web visualizations and how they can be useful when you have some real device.
所以我将向您展示这个可视化 Honoria 系统的一些示例。
So I will show you some example of this visualization Honoria system.